<style>
.btn{
  color: #00aaee;
  cursor: pointer;
}
  .button {
    margin-right:10px;
  }
  .controll-box{
    border-left: 1px solid #dfdfdf;
  }
  tr.selected{
    background: #efefff;
  }
</style>
<style scoped>
  input[type='checkbox']{
    position: relative;
    top:7px;
  }
   .control>label{
     display: inline-block;
     height: 30px;
     line-height: 30px;
     margin:0 10px;
   }
</style>
<template>
  <main>
    <div class="tile is-ancestor">
      <div class="tile is-parent is-8">
        <div class="tile is-ancestor">
          <div class="tile is-parent">
            <article class="tile is-child">
              <h4 class="title is-4"><b>页面列表</b></h4>
              <h4 style="text-align: right;margin-bottom: 10px">
               <span style="display: inline-block" class="control has-addons">
                 <label for="">页面类型</label>
                 <select name="" class="select" @change="getList" style="height: 30px;border-radius: 0;" v-model="page.url" id="">
                   <option value="">默认</option>
                   <!--<option value="tplIndex">首页</option>-->
                   <!--<option value="tplList">列表</option>-->
                   <option value="tplDetail">详情</option>
                   <option value="tplItem">新闻列表</option>
                   <option value="tplTime">时间轴</option>
                   <!--<option value="tplActive">活动</option>-->
                   <!--<option value="tpl">自定义</option>-->
                 </select>
                 <label for="">关键字</label>
                <input class="input" type="text" v-model="page.keyword">
                <a class="button is-info" @click="getList">查询</a>
              </span>
              </h4>
              <table class="table">
                <thead>
                <tr>
                  <th>名称</th>
                  <th>路径</th>
                  <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item,index) in list" :class="{'selected': item.id == id}" @click="getModify(item.id)">
                  <td>{{item.name}}</td>
                  <td>{{item.url}}</td>
                  <td class="is-icon">
                    <div class="btn-group">
                      <span class="btn" @click.stop="modify(item.id,item.url)">
                        编辑
                      </span>
                      <span class="btn" @click.stop="deletes(item.id)">
                        删除
                      </span>
                    </div>
                  </td>
                </tr>
                </tbody>
              </table>
              <page :data.sync="pageData" @choose="getList"></page>
            </article>
          </div>
        </div>
      </div>
      <div class="tile is-parent is-4 controll-box">
        <article class="tile is-child">
          <div class="block">
            <p class="title is-5">类目添加</p>
          </div>
          <div class="block">
            <div class="control is-horizontal">
              <div class="control-label">
                <label class="label">名称</label>
              </div>
              <div class="control">
                <div class="control is-fullwidth">
                  <input class="input" v-model="param.name" type="text">
                </div>
              </div>
            </div>
            <!--<div class="control is-horizontal">-->
              <!--<div class="control-label">-->
                <!--<label class="label">语言</label>-->
              <!--</div>-->
              <!--<div class="control">-->
                <!--<div class="control is-fullwidth">-->
                  <!--<input class="input" v-model="param.langKey" type="text">-->
                <!--</div>-->
              <!--</div>-->
            <!--</div>-->
            <div class="control is-horizontal">
              <div class="control-label">
                <label class="label">类型</label>
              </div>
              <div class="control">
                <div class="select is-fullwidth">
                  <select v-model="param.url">
                    <!--<option value="tplIndex">首页</option>-->
                    <!--<option value="tplList">列表</option>-->
                    <option value="tplDetail">详情</option>
                    <option value="tplItem">新闻列表</option>
                    <option value="tplTime">时间轴</option>
                    <!--<option value="tplActive">活动</option>-->
                    <!--<option value="tpl">自定义</option>-->
                  </select>
                </div>
              </div>
            </div>
            <div class="control is-horizontal">
              <div class="control-label">
                <label class="label">菜单项</label>
              </div>
              <div class="control">
                <div class="select is-fullwidth">
                  <select v-model="menuId">
                    <option v-for="item in menuList" :value="item.id">{{item.name}}</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="control is-horizontal">
              <div class="control-label">
                <label class="label">激活</label>
              </div>
              <div class="control">
                <div class="control is-fullwidth">
                  <input v-model="param.enabled" type="checkbox">
                </div>
              </div>
            </div>
            <div class="control is-horizontal">
              <div class="control-label">
                <label class="label"></label>
              </div>
              <div class="control">
                <button class="button" @click="add">添加</button>
                <button class="button" @click="toModify">编辑</button>
              </div>
            </div>
          </div>
        </article>
      </div>
    </div>
  </main>
</template>

<script>
  import mixin from './mixin'
  export default {
    data () {
      return {
        param:{
          "content": "",
          "displayOrder": 0,
          "enabled": true,
          "langKey": "",
          "name": "",
          "url": "",
          "websiteId": "89060613317206016",
        },
        menuId:'',
        menuList:[],
        page:{
          page:0,
          size:5,
          keyword:'',
          url:'',
          sort:[]
        },
      }
    },
    mixins:[mixin],
    methods: {
      getMenu () {
        let vm = this
        this.$http.get('menu/api/items?page=0&size=1000&sort=name,asc',{}).then(function(res){
          vm.menuList = res.data
        })
      },
      getList (num) {
        this.page.page = num?num:0
        this.id = ''
        this._get('cms/api/websites/89060613317206016/pages',this.page)
      },
      add () {
        let param = {...this.param}, vm = this
        param.url = this.param.url+'?menuId='+this.menuId
        this._add('cms/api/pages',param,function(res){
          vm.getList(res)
          vm.$http.get('menu/api/items/'+vm.menuId,{}).then(function(data){
            let params = data.data
            params.url = data.data.url.indexOf('?')>-1?(data.data.url.split('?')[0]+'?productId='+res.id):(data.data.url+'?productId='+res.id)
            vm.$http.put('menu/api/items',Object.assign({id:vm.menuId},params)).then(function(){
            })
          })
        })
      },
      modify (id,url) {
        this.$router.push({path:'/'+url,query:{id:id}})
      },
      getModify (id) {
        this.id = id
        let vm = this
        this._getModify('cms/api/pages/'+id,{},function(){
          let param = {...vm.param}
          let arr = param.url.indexOf('?')<0?[param.url]:param.url.split('?')
          param.url = arr[0]
          vm.menuId = arr[1]?arr[1].split('=')[1]:''
          vm.param = param
        })
      },
      toModify () {
        let param = {...this.param}
        param.url = this.param.url+'?menuId='+this.menuId
        this._modify('cms/api/pages',Object.assign({id:this.id},param),this.getList)
      },
      deletes (id) {
        this._delete('cms/api/pages/'+id,{},this.getList)
      }
    },
    mounted () {
        this.toggleSidebars(false)
        this.getList()
        this.getMenu()
        this.menuId = this.$route.query.menuId
    }
  }
</script>
